<template>
	<view class="invoice-detail">

		<!-- Header Start -->
		<view class="header white text-center flex-col row-center">
			<view class="flex row-center lg bold">
				<image v-if="!invoiceInfo.status" src="../../static/invoice_wait.png" mode=""></image>
				<image v-else src="../../static/invoice_success.png" mode=""></image>
				{{ invoiceInfo.status_text || '' }}
			</view>
			<view class="sm m-t-10" v-if="!invoiceInfo.status">发票正在开具中，预计需要24小时，请耐心等待!</view>
			<view class="sm m-t-10" v-else>已开发票金额：{{ invoiceInfo.invoice_amount }}</view>
		</view>
		<!-- Header End -->

		<!-- Main Start -->
		<view class="main">
			<view class="card bg-white">
				<view class="lg bold p-l-30 p-b-18">发票信息</view>

				<view class="form-item">
					<view class="label">发票金额</view>
					<view class="content">{{ invoiceInfo.invoice_amount || '' }}</view>
				</view>

				<view class="form-item">
					<view class="label">发票类型</view>
					<view class="content">{{ invoiceInfo.type == 0 ? '普通' : '专用' }}</view>
				</view>

				<view class="form-item">
					<view class="label">抬头类型</view>
					<view class="content">{{ invoiceInfo.header_type_text }}</view>
				</view>

				<view class="form-item">
					<view class="label">抬头名称</view>
					<view class="content">{{ invoiceInfo.name || '' }}</view>
				</view>

				<view class="form-item" v-if="invoiceInfo.duty_number">
					<view class="label">税号</view>
					<view class="content">{{ invoiceInfo.duty_number || '' }}</view>
				</view>

				<view class="form-item">
					<view class="label">邮箱</view>
					<view class="content">{{ invoiceInfo.email || '' }}</view>
				</view>

				<view class="form-item" v-if="invoiceInfo.address">
					<view class="label">企业地址</view>
					<view class="content">{{ invoiceInfo.address || '' }}</view>
				</view>

				<view class="form-item" v-if="invoiceInfo.mobile">
					<view class="label">企业电话</view>
					<view class="content">{{ invoiceInfo.mobile || '' }}</view>
				</view>

				<view class="form-item" v-if="invoiceInfo.bank">
					<view class="label">开户银行</view>
					<view class="content">{{ invoiceInfo.bank || '' }}</view>
				</view>

				<view class="form-item" v-if="invoiceInfo.bank_account">
					<view class="label">银行账号</view>
					<view class="content">{{ invoiceInfo.bank_account || '' }}</view>
				</view>

				<view class="form-item">
					<view class="label">申请时间</view>
					<view class="content">{{ invoiceInfo.create_time || '' }}</view>
				</view>
				<view class="form-item" v-if="invoiceInfo.invoice_url" style="justify-content: center;">
					<!-- #ifdef  MP-WEIXIN -->
					<button @click="download(invoiceInfo.invoice_url)" style="color: #01abe6;">下载发票</button>
					<!-- #endif -->
					<!-- #ifdef  H5 -->
					<a :href="invoiceInfo.invoice_url" style="color: #01abe6;">下载发票</a>
					<!-- #endif -->
				</view>
			</view>

			<view class="card bg-white m-t-20">
				<view class="m-l-20">
					<shop-title :shop="shopInfo" :is-link="false"></shop-title>
				</view>
				<order-goods :list="goodsInfo"></order-goods>

				<view class="form-item">
					<view class="label">订单状态</view>
					<view class="content">{{ order_status_text }}</view>
				</view>

				<view class="form-item">
					<view class="label">订单编号</view>
					<view class="content">{{ order_sn }}</view>
				</view>

				<view class="form-item">
					<view class="label">下单时间</view>
					<view class="content">{{ create_time }}</view>
				</view>
			</view>
		</view>
		<!-- Main End -->

		<!-- Footer Start -->
<!-- 		<view class="footer" v-if="!invoiceInfo.status">
			<view class="btn br16">
				<button class="btn br16" size="lg" @click="toEditInvoice">编辑发票</button>
			</view>
		</view> -->
		<!-- Footer End -->
	</view>
</template>

<script>
	import {
		apiOrderInvoiceDetail
	} from "@/api/shop.js"
	import {
		invoiceType
	} from "@/utils/type.js"
	export default {
		data() {
			return {
				invoiceInfo: {}, // 发票信息
				goodsInfo: {}, // 商品信息
				shopInfo: {}, // 店铺信息
				orderId: '', // 订单ID
				create_time: '',
				order_status_text: '',
				order_sn: ''
			}
		},

		methods: {
			// 获取订单发票详情
			initInvoiceInfoFunc() {
				apiOrderInvoiceDetail({
					id: this.orderId
				}).then(res => {
					this.invoiceInfo = res.data.invoice;
					this.goodsInfo = res.data.order_goods;
					this.shopInfo = res.data.shop;
					this.create_time = res.data.create_time;
					this.order_status_text = res.data.order_status_text;
					this.order_sn = res.data.order_sn;
				})
			},
			// 去编辑发票
			toEditInvoice() {
				this.$Router.push({
					path: '/bundle/pages/invoice/invoice',
					query: {
						invoice_id: this.invoiceInfo.id,
						shop_id: this.shopInfo.id,
						type: invoiceType['ORDERDETAILEdit']
					}
				})
			},
			//下载发票
			download(url) {
				uni.downloadFile({
					url: `${url}`,
					success: response => {
						if (response.statusCode === 200) {
							uni.saveFile({
								tempFilePath: response.tempFilePath,
								success: (resData) => {
									uni.openDocument({
										filePath: resData.savedFilePath,
										fileType: 'pdf',
										showMenu: true,
										success: r => {
											console.log(r)
										},
										fail: openError => {
											console.log('打开失败: ', openError)
										}
									})
								},
								fail: error => {
									console.log('error: ', error)
								}
							})
						}
					}
				})
			}
		},

		onLoad() {
			const query = this.$Route.query;
			this.orderId = query.id || ''
		},

		onShow() {
			this.initInvoiceInfoFunc();
		}
	}
</script>

<style lang="scss">
	.invoice-detail {
		padding-bottom: 120rpx;
		background: linear-gradient(to bottom, $-color-primary 230rpx, transparent 0);

		.header {
			height: 140rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.main {
			.card {
				padding: 24rpx 0 30rpx 0;
				border-radius: 14rpx;
			}

			.form-item {
				display: flex;
				padding: 12rpx 30rpx;
				color: $-color-normal;
				font-size: 28rpx;

				.label {
					width: 120rpx;
					text-align: right;
					margin-right: 40rpx;
				}

				.content {
					flex: 1;
				}
			}
		}

		.footer {
			left: 0;
			bottom: 20rpx;
			width: 100%;
			padding: 24rpx;
			position: fixed;

			.btn {
				height: 88rpx;
				color: $-color-white;
				background-color: $-color-primary;
			}
		}
	}
</style>